<template>
	<view class="content" :style="{'--color': color}">
		<status-bar title="学习" back='0'></status-bar>
	
		<!-- 搜索 -->
		
	<!-- 	<view class="viewbox auto search p-left20 p-right20 d-flex a-center m-top20">
			<view class="iconfont icon-btn_search size28 color_cc m-right10"></view>
			<input type="text" value="" placeholder="搜索" class="flex-1 size28" confirm-type="search" @confirm="confirm"/>
		</view> -->
		
		<view class="banner-box">
			<swiper class="banner" v-if='bannerConfig.length > 0' :circular="true" :autoplay="true" :interval="3000" :duration="1000">
				<swiper-item v-for="(item,index) in bannerConfig" :key='index'>
					<view class="swiper-item">
						<image :src="imgUrl+item.img" mode="aspectFill"></image>
					</view>
				</swiper-item>
			</swiper>
		</view>
		
		<scroll-view scroll-x="true" class="rows nowrap  m-top30 p-left20 p-right20">
			<block v-for="(item,index) in navlists" :key="index">
			<view class="d-inline-block color_33 size28 m-right30 p-bot20 navlist " 
			     :class="{'active':current == index}" @click="Changelist(item.class_id,index)">{{item.class_name}}</view>
			</block>
		</scroll-view>
		
		
		<!-- 有课程分类 -->
		<swiper :indicator-dots="false" 
		        :autoplay="false"
				:current="current"
				:style="{height:SwipeHeight+'px'}"
				class="viewbox auto m-top30"
				v-if="pageList.length">	
			<swiper-item v-for="(item,index) in pageList" :key="index" >
				<block v-if="item.list && item.list.length">
					<view class="rows" :class="'getHeight'+index">
						<view class="row padding20 bor_radius_10 listswp m-bot20" 
							  v-for="(subItem,subIndex) in item.list" :key="subIndex"
							  @click="toUrl(`/pages/ply/plyList?id=${subItem.class_id}`)">
							<image :src="imgUrl+subItem.class_img" mode="aspectFill" class="swimg"></image>
							<view class="flex-1 m-left20">
								<view class="rows ellipsis color_33 size32 bold">{{subItem.class_name}}</view>
								<view class="rows a-center color_66 h6 m-top20 ellipsis_2">{{subItem.class_info}}</view>
								<view class="row a-center m-top30 ">
									<view class="tbs ts1">课程({{subItem.lesson_count}})</view>
								</view>
							</view>
						</view>
					</view>
				</block>
				<empty type='1' cat='2'  msg='暂无课程' v-else></empty>
				
			</swiper-item>
		
		</swiper>
		
		
	</view>
</template>

<script>
	import {mapState} from 'vuex';
	export default {
		data() {
			return {
				pageShow: false,
				current: 0,
				navlists: [],
				imgUrl: this.imgUrl,
				class_id: '',
				city: '重庆',
				pageData: [],
				color: getApp().globalData.color,
				bannerConfig:[],
				SwipeHeight: 400,
				pageList:[],
			}
		},
		
		methods: {
			top_class() {
				this.$http.get({
					url: '/zzj_singleSaleApi/top_class',
					data: {
						bid: uni.getStorageSync('bid'),
					}
				}).then(res => {
					if (!res.status) return this.$Toast(res.msg);
					if (!res.data) return this.pageShow = true;;
					this.navlists = res.data.class;
					this.bannerConfig = res.data.banner;
					this.list(this.navlists[0].class_id, 0);
					this.getSwiperHeight();
					
				})
			},
			list(class_id, index) {
				this.cureent = index;
				this.$http.get({
					url: '/zzj_singleSaleApi/lesson_index',
					data: {
						bid: uni.getStorageSync('bid'),
						class_id
					}
				}).then(res => {
					if (!res.status) return this.$Toast(res.msg);
					this.pageList = res.data;
					if(this.videoNavid != 0 && this.navlists.length){
						console.log(this.navlists,'navlists');
						let index = this.navlists.findIndex(n=>n.class_id == this.videoNavid);
						console.log(index,'index');
						this.current = index;
					}
				
					this.getSwiperHeight();
				})
			},
			
			Changelist(class_id,index){
				this.current = index;  
				this.getSwiperHeight();
			},
			
			getSwiperHeight(){
				let that = this;
				
				if(that.pageList.length > 0){
					setTimeout(()=>{
						uni.createSelectorQuery().select(".getHeight"+that.current).boundingClientRect((res) => {
							if(res)  that.SwipeHeight = res.height<that.SwipeHeight?that.SwipeHeight:res.height
						   
						}).exec();
					},100)
				}
			},
		},
		
		computed:{
			...mapState(['videoNavid']),
		},

	}
</script>

<style scoped lang="scss">
	.content {
		width: 100%;
		background-color: #FFFFFF;
		flex-direction: column;
		height: calc(100vh - 100rpx - env(safe-area-inset-bottom));
	}
	.search{
		height: 60rpx;
		background-color: #f2f2f2;
		border-radius: 40rpx;
	}
	.banner-box{
		padding-top: $page-spacing;
		.banner{
			height: 280rpx;
			.swiper-item{
				margin: 0 $page-spacing;
				image{
					height: 280rpx;
					width: 100%;
					background-color: #f2f2f2;
					border-radius: 10rpx;
				}
			}
		}
	}
	.scrollRow{
		height: 200rpx;
	}
	.active{
		border-bottom: 2px solid var(--color);
	    color:var(--color);
	}
	.navlist:last-child{
		margin-right: 0;
	}
	
	.listswp{
		border:1px solid #efefef;
		border-radius: 8rpx;
	}
	.swimg{
		width:208rpx;
		height: 208rpx;
	}
	.tbs{
		padding:4rpx 10rpx !important;
		border-radius: 10rpx;
		
	}
	.ts1{
		background-color: #E3FBF0;
		color: #01D475;
	}
	.ts2{
		background-color: #F8AD24;
	}
</style>
